<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
subcategories maintenance<br/>
${msg}
<form:form method="post" action="${pageContext.request.contextPath}/user/create/story" commandName="story">
 	
    <table>
    <tr>
    	<Td><form:label path="categoriesId">Category:</form:label></Td>
    	<td>
			<form:select path="categoriesId" onchange="loadSubCategories(this.value)">
				<form:option alt="Select Category" label="Select Category" value="0"/>
<c:forEach var="cats" items="${categories}">        		
        		<form:option alt="${cats.description}" label="${cats.name}" value="${cats.categoriesId}"/>
</c:forEach>
        	</form:select>    	
    	</td>
    </tr>
    <tr>
    	<td>Sub Category</td>
    	<td>
    		<select id="subCategoriesId" name="subCategoriesId">
    			<option alt="Select Sub Category" label="Select Sub Category" value="0"/>
        	</select>  
        </td>
    </tr>    
    <tr>
    	<td><form:label path="title">Title:</form:label></td>
        <td><form:input path="title" /></td>  
    </tr>
    <tr>
        <td><form:label path="summary">Name:</form:label></td>
        <td><form:textarea rows="5" cols="5" path="summary" /></td> 
    </tr>
    <tr>
        <td colspan="2">
            <input type="submit" value="Submit"/>
            <form:hidden path="storiesId" />
        </td>
    </tr>
    </table>
    
</form:form>
<script>

function loadSubCategories(catId){
	alert("loadSubCategories "+catId);
	$('#subCategoriesId').empty();
	$.getJSON('${pageContext.request.contextPath}/ajax/subcategories/list/cat/'+catId,function(data){
		//$('#subCategoriesId').append()
		$.each(data,function(index,optionData){
			$('#subCategoriesId').append('<option alt="'+optionData.description+'" value="'+optionData.subCategoriesId+'">'+optionData.name+'</option>');
		});
	}); 
}

</script>